
<template>
  <div class="xxxx" >
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
import HighCharts from 'highcharts';
import Xrange from 'highcharts/modules/xrange'
import Exporting from 'highcharts/modules/exporting'
import Oldie from 'highcharts/modules/oldie'
import highcharts3d from 'highcharts/highcharts-3d'
import { onMounted, ref,reactive } from 'vue';

Xrange(HighCharts);
Xrange(HighCharts);
Exporting(HighCharts);
Oldie(HighCharts);
const options = ref({
  lang:{
    viewFullscreen:"全屏",
    contextButtonTitle:"图表导出菜单",
    decimalPoint:".",
    downloadJPEG:"下载JPEG图片",
    downloadPDF:"下载PDF文件",
    downloadPNG:"下载PNG文件",
    downloadSVG:"下载SVG文件",
    drillUpText:"返回 {series.name}",
    loading:"加载中",
    months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    noData:"没有数据",
    numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
    printChart:"打印图表",
    resetZoom:"恢复缩放",
    resetZoomTitle:"恢复图表",
    shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
    thousandsSep:",",
    weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
  },
  chart: {
    backgroundColor: 'rgba(0,0,0,0)',
    plotShadow: false,
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 40,
      beta: 0
    },
  },
  colors: [ 'rgba(3,127,252,0.85)', 'rgba(70,241,13,0.82)', 'rgba(10,246,148,0.87)', 'rgba(7,252,230,0.84)'],
  title: {
    text: '总数量：195225',
    style:{
      color: "white"
    }
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  credits: {
    enabled:false,
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      dataLabels: {
        enabled: true, //是否显示饼图的线形tip
        distance: 20,//设置引导线的长度
        color: '#FFF',//全局设置字体颜色
        style: {
          textOutline: 'none',        //去掉文字白边
          fontSize: '12'
        },
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '30%',
    name: '占比：',
    data: [
      ['香蕉', 8],
      ['猕猴桃', 3],
      ['桃子', 1],
      ['橘子', 6],
      ['苹果', 8],
      ['梨', 4],
      ['柑橘', 4],
      ['橙子', 1],
      ['葡萄 (串)', 1]
    ],
  }]
})
onMounted(() => {
  highcharts3d(HighCharts)
  HighCharts.chart('container', options.value);
})

</script>

<style scoped>
#container {
  min-width: 30vh;
  max-width: 80vh;
  height: 25vh;
}
.item-img{
  background-image: url("../assets/bb.png");
  background-size: 100% 100%;
  width: 60%;
  margin:auto;
  color: white;
}
</style>
